<template>
  <div style="height:100%">
    <div class="statistics-title">
      <i class="el-icon-s-flag statistics-icon"></i>新增总览</div>
    <week-date @childEvent="parentMethod"></week-date>
    <div class="float-state1">
      <div class="stateClass">规划许可</div>
      <div class="title-right">
        新增
        <div class="stateNum">{{ firstNum }}</div>
      </div>
      <div class="staticDate">{{ date }}</div>
    </div>
    <div class="float-state2">
      <div class="stateClass">施工管理</div>
      <div class="title-right">
        新增
        <div class="stateNum">{{ secondNum }}</div>
      </div>
      <div class="staticDate">{{ date }}</div>
    </div>
    <div class="float-state3">
      <div class="stateClass">竣工验收</div>
      <div class="title-right">
        新增
        <div class="stateNum">{{ thirdNum }}</div>
      </div>
      <div class="staticDate">{{ date }}</div>
    </div>
    <div class="float-state4">
      <div class="stateClass">业务归档</div>
      <div class="title-right">
        新增
        <div class="stateNum">{{ gatherNum }}</div>
      </div>
      <div class="staticDate">{{ date }}</div>
    </div>
    <div class="statistics-title">
      <i class="el-icon-s-flag statistics-icon"></i>节点统计
    </div>
    <div style="height:30%">
      <div id="container" class="container"></div>
    </div>
  </div>
</template>

<script>
  import HighCharts, {
    error
  } from "highcharts";
  import weekDate from "./weekDate";
  import {
    everyDayNewApi,
    staticStateApi
  } from "@/api/statistics/statisticsApi";
  import store from "../../../vuex/store";
  export default {
    components: {
      weekDate,
    },
    props: {},
    data() {
      return {
        currentCode: store.getters.currentCode,
        total: 0,
        stateData: [
          ["规划许可", 45],
          ["施工管理", 26],
          ["竣工验收", 20],
          ["业务归档", 8],
        ],
        firstNum: "0",
        secondNum: "0",
        thirdNum: "0",
        gatherNum: "0",
        date: "",
      };
    },
    created: function () {
      staticStateApi(this.currentCode).then((res) => {
        this.stateData = res.data.data;
        res.data.data.forEach((e) => (this.total += e.y));
        this.chartState();
      });
    },
    methods: {
      parentMethod(currentDate) {
        this.date = currentDate;
        let list = {
          startTime: currentDate,
          addressCode: this.currentCode,
        };
        everyDayNewApi(list)
          .then((res) => {
            if (res.data.data.length > 0)
              res.data.data.forEach((e) => {
                if (e.name == "规划许可") {
                  this.firstNum = e.y;
                } else if (e.name == "施工管理") {
                  this.secondNum = e.y;
                } else if (e.name == "竣工验收") {
                  this.thirdNum = e.y;
                } else if (e.name == "业务归档") {
                  this.gatherNum = e.y;
                }
              });
          })
          .catch((error) => {
            console.log(error);
          });
      },
      chartState() {
        let _that = this;
        var chart = HighCharts.chart(
          "container", {
            credits: {
              enabled: false
            },
            chart: {
              spacing: [40, 0, 40, 0],
            },
            title: {
              style: {
                "font-size": "20px",
                background: "#EEF1FB",
                color: "#0137A1",
              },
              floating: true,
              text: "总量" + this.total + "件",
            },
            tooltip: {},
            plotOptions: {
              pie: {
                allowPointSelect: true,
                cursor: "pointer",
                dataLabels: {
                  enabled: true,
                  style: {
                    color: (HighCharts.theme && HighCharts.theme.contrastTextColor) ||
                      "black",
                  },
                },
                point: {
                  events: {
                    mouseOver: function (e) {
                      // 鼠标滑过时动态更新标题
                      chart.setTitle({
                        text: e.target.name + "\t" + e.target.y + "件",
                      });
                    },
                  },
                },
              },
            },
            series: [{
              type: "pie",
              innerSize: "80%",
              name: "件数",
              data: this.stateData,
            }, ],
          },
          function (c) {
            // 图表初始化完毕后的会掉函数
            // 环形图圆心
            var centerY = c.series[0].center[1],
              titleHeight = parseInt(c.title.styles.fontSize);
            // 动态设置标题位置
            c.setTitle({
              y: centerY + titleHeight / 2,
            });
          }
        );
      },
    },
  };
</script>

<style>
  .statistics-title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-top: 20px
  }

  .statistics-icon {
    margin-right: 5px;
    color: cornflowerblue;
  }

  .float-state1 {
    margin-top: 2%;
    background: #f6f6f6;
    border-radius: 5px;
    border-left: 5px solid #fdf4dd;
    height: 10%;
  }

  .float-state1:hover {
    border-left: 5px solid #f0b100;
  }

  .float-state2 {
    margin-top: 2%;
    background: #f6f6f6;
    border-radius: 5px;
    border-left: 5px solid #cce8db;
    height: 10%;
  }

  .float-state2:hover {
    border-left: 5px solid #27b470;
  }

  .float-state3 {
    margin-top: 2%;
    background: #f6f6f6;
    border-radius: 5px;
    border-left: 5px solid#F7DACA;
    height: 10%;
  }

  .float-state3:hover {
    border-left: 5px solid#FF6C1E;
  }

  .float-state4 {
    margin-top: 2%;
    background: #f6f6f6;
    border-radius: 5px;
    border-left: 5px solid#CCE7F7;
    height: 10%;
  }

  .float-state4:hover {
    border-left: 5px solid #29aeff;
  }

  .stateClass {
    padding-top: 15px;
    margin-left: 15px;
    font-size: 14px;
    font-weight: 700;
  }

  .staticDate {
    margin-top: 10px;
    font-size: 12px;
    margin-left: 15px;
  }

  .title-right {
    margin-top: 0;
    float: right;
    font-size: 14px;
    text-align: center;
  }

  .stateNum {
    font-size: 30px;
    float: right;
    margin: -13px 10px 0 10px;
    color: #000;
    letter-spacing: -1px;
  }

  .stateNum:hover {
    font-size: 60px;
    color: green;
    margin: -40px 20px 0 10px;
    letter-spacing: -5px;
  }

  .container {
    width: 100%;
    height: 310px;
  }
</style>